<template>
  <!-- 组件的结构。其中template标签是不参与结构编译的 -->
  <div class="demo">
    <h1>{{ msg }}</h1>
    <h2>学生名称：{{ name }}</h2>
    <h2>初始年龄：{{ age }}</h2>
    <h2>学生年龄：{{ myAge + 1 }}</h2>
    <button @click="changeMyAge()">点我使年龄++</button>
    <button @click="showName">点我提示学生名称</button>
    <hr>
  </div>
</template>

<script>
// 组件交互相关的代码（数据、方法等等）。

// // 暴漏方式一：分别暴露
// export const student = Vue.extend({
//   data() {
//     return {
//       student: {
//         name: '尚硅谷',
//         age: '北京市昌平区宏福科技园',
//       }
//     }
//   },
//   methods: {
//     showName() {
//       alert(this.student.name);
//     }
//   }
// });


// const student = Vue.extend({
//   data() {
//     return {
//       student: {
//         name: '尚硅谷',
//         age: '北京市昌平区宏福科技园',
//       }
//     }
//   },
//   methods: {
//     showName() {
//       alert(this.student.name);
//     }
//   }
// });
// 暴漏方式二：统一暴露
// export {student};


// 暴露方式三：默认暴露
// export default {student};
// 如果是暴露出一个对象的话，就直接省略花括号{}
// export default student;


// 直接使用默认暴露的话，可以省略 student 变量定义
// export default Vue.extend({
//   data() {
//     return {
//       student: {
//         name: '尚硅谷',
//         age: '北京市昌平区宏福科技园',
//       }
//     }
//   },
//   methods: {
//     showName() {
//       alert(this.student.name);
//     }
//   }
// });

// 其中可以省略Vue.extend()
export default {
  name: 'Student', // 定义默认的组件名称，最好和组件的名称保持一致性
  data() {
    return {
      msg: '我是尚硅谷的一个学习Vue的学生！',
      // 通过外部传参的形式获取到真实的数据
      // student: {
      //   name: '张飒飒',
      //   age: 18,
      // },

      // 【重点】如果属性名称冲突的话，优先使用按照props的从外部组件接收到属性。
      myAge: this.age,
    }
  },
  methods: {
    showName() {
      alert(this.name);
    },
    // 点我使年龄+1
    changeMyAge() {
      this.myAge++;
    }
  },
  // 方式一：【简单声明接收】接受外部的传参，使用数组的方式
  // props: ['name', 'age'],

  // 方式二：【接收的同时对数据进行类型限制】JS内置构造函数
  // props: {
  //   name: String,
  //   age: Number,
  // }

  // 方式三：【接收的同时对数据进行类型限制 + 默认值的指定 + 必要性的限制】
  props: {
    name: {
      type: String,  // type表示传递的类型
      required: true // required 表示是否必填，其中true表示必填，false表示非必填
    },
    age: {
      type: Number,
      default: 18 // default 表示的是如果没有传参的话，就使用默认值
    }
  }
};
</script>

<style scoped>
/* 组件的样式 */
.demo {
  background: orange;
}
</style>


